import React, {Component} from 'react';
import './App.css';
import imageDatasJson from './imageDatas.json'
import ImageFigure from './component/ImageFigure'
import ReactDOM from "react-dom";
import img_1 from './images/1.jpg'
import img_2 from './images/2.jpg'
import img_3 from './images/3.jpg'
import img_4 from './images/4.jpg'
import img_5 from './images/5.jpg'
import img_6 from './images/6.jpg'
import img_7 from './images/7.jpg'
import img_8 from './images/8.jpg'
import img_9 from './images/9.jpg'
import img_10 from './images/10.jpg'
import img_11 from './images/11.jpg'
import img_12 from './images/12.jpg'
import img_13 from './images/13.jpg'
import img_14 from './images/14.jpg'
import img_15 from './images/15.jpg'
import img_16 from './images/16.jpg'
import ControllerUnit from "./component/ControllerUnit";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imgsArrangeArr: [
        /*{
          pos: {
            top: 0,
            left: 0,
          },
          rotate: 0,//旋转角度
          isInverse: false,//是否反转
          isCenter: false,//是否居中
        }*/
      ],
    }
  }

  Constant = {
    centerPos: {
      left: 0,
      right: 0
    },
    hPosRange: {  //水平方向取值
      leftSecX: [0, 0],
      rightSecX: [0, 0],
      y: [0, 0],
    },
    vPosRange: {  //垂直方向取值
      x: [0, 0],
      topY: [0, 0],
    },
  };

  componentDidMount() {
    //计算位置范围
    const stageDom = ReactDOM.findDOMNode(this.refs.stage),
      stageW = stageDom.scrollWidth,
      stageH = stageDom.scrollHeight,
      halfStageW = Math.ceil(stageW / 2),
      halfStageH = Math.ceil(stageH / 2);
    const imageFigureDom = ReactDOM.findDOMNode(this.refs.imageFigure0),
      imgW = imageFigureDom.scrollWidth,
      imgH = imageFigureDom.scrollHeight,
      halfImgW = Math.ceil(imgW / 2),
      halfImgH = Math.ceil(imgH / 2);

    //中心图片位置
    this.Constant.centerPos = {
      left: halfStageW - halfImgW,
      top: halfStageH - halfImgH,
    };
    //水平图片位置(左侧右侧图片的取值范围)
    this.Constant.hPosRange.leftSecX[0] = -halfImgW;
    this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3;
    this.Constant.hPosRange.rightSecX[0] = halfStageW + halfImgW;
    this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW;
    this.Constant.hPosRange.y[0] = -halfImgW;
    this.Constant.hPosRange.y[1] = stageH - halfImgW;

    //垂直方向距离(上侧图片的取值范围)
    this.Constant.vPosRange.topY[0] = -halfImgH;
    this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3;
    this.Constant.vPosRange.x[0] = halfStageW - imgW;
    this.Constant.vPosRange.x[1] = halfStageW;

    this.rearrenge(0)
  }

  //获取区间随机值
  getRangeRandom(min, max) {
    return Math.ceil(Math.random() * (max - min) + min)
  }

  //获取旋转角度(-30 到 30°)
  getRotateRandom() {
    return (Math.random() > 0.5 ? "" : "-") + Math.ceil(Math.random() * 30);
  }

  //反转图片
  inverse(index) {
    console.log(index);
    let imgsArrangeArr = this.state.imgsArrangeArr;
    imgsArrangeArr[index].isInverse = !imgsArrangeArr[index].isInverse;
    this.setState({
      imgsArrangeArr: imgsArrangeArr,
    })
  }

  //居中图片
  center(index) {
    this.rearrenge(index);
  }

  //重新布局所有图片 centerIndex : 居中排布的图片
  rearrenge(centerIndex) {
    let imgsArrangeArr = this.state.imgsArrangeArr,
      Constant = this.Constant,
      centerPos = Constant.centerPos,
      hPosRange = Constant.hPosRange,
      vPosRange = Constant.vPosRange,
      hPosRangeLeftSecX = hPosRange.leftSecX,
      hPosRangeRightSecX = hPosRange.rightSecX,
      hPosRangeY = hPosRange.y,
      vPosRangeTopY = vPosRange.topY,
      vPosRangeX = vPosRange.x,

      imgsArrangeTopArr = [],
      topImgNum = Math.floor(Math.random() * 2),//0 或者 1


      topImgSpliceIndex = 0,

      imgsArrrageCenterArr = imgsArrangeArr.splice(centerIndex, 1);

    //居中 centerIndex 的图片 中间图片不旋转
    imgsArrrageCenterArr[0] = {
      pos: centerPos,
      rotate: 0,
      isCenter: true,
    };

    //取出要布局在上侧的图片信息
    topImgSpliceIndex = Math.ceil(Math.random() * (imgsArrangeArr.length - topImgNum));
    imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum);

    //布局上侧图片
    imgsArrangeTopArr.forEach((value, index) => {
      imgsArrangeTopArr[index] = {
        pos: {
          top: this.getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1]),
          left: this.getRangeRandom(vPosRangeX[0], vPosRangeX[1]),
        },
        rotate: this.getRotateRandom(),
        isCenter: false,
      };
    });

    //布局左右两侧的图片
    for (let i = 0, j = imgsArrangeArr.length, k = j / 2; i < j; i++) {
      let hPosRangeLORX = null;
      //如果是左侧
      if (i < k) {
        hPosRangeLORX = hPosRangeLeftSecX;
      } else {
        hPosRangeLORX = hPosRangeRightSecX;
      }
      imgsArrangeArr[i] = {
        pos: {
          top: this.getRangeRandom(hPosRangeY[0], hPosRangeY[1]),
          left: this.getRangeRandom(hPosRangeLORX[0], hPosRangeLORX[1]),
        },
        rotate: this.getRotateRandom(),
        isCenter: false,
      };
    }

    //塞回去
    if (imgsArrangeTopArr && imgsArrangeTopArr[0]) {//如果上侧有
      imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]);
    }
    imgsArrangeArr.splice(centerIndex, 0, imgsArrrageCenterArr[0]);

    //更新状态
    this.setState({
      imgsArrangeArr: imgsArrangeArr,
    })
  }

  render() {
    const imageDatas = [];
    const images = [img_1, img_2, img_3, img_4, img_5, img_6, img_7, img_8,
      img_9, img_10, img_11, img_12, img_13, img_14, img_15, img_16,];
    for (let i = 0; i < imageDatasJson.length; i++) {
      let imageData = imageDatasJson[i];
      imageData.img = images[i];
      imageDatas.push(imageData);
    }
    return (
      <section className="stage" ref="stage">
        <section
          className="img-sec"
          style={{perspective: 1800,}}>
          {
            imageDatas.map((imageData, index) => {
              if (!this.state.imgsArrangeArr[index]) {
                this.state.imgsArrangeArr[index] = {
                  pos: {
                    top: 0,
                    left: 0,
                  },
                  rotate: 0,
                  isInverse: false,
                  isCenter: false,
                }
              }

              return <ImageFigure
                arrange={this.state.imgsArrangeArr[index]}
                imageData={imageData}
                inverse={() => this.inverse(index)}
                center={() => this.center(index)}
                key={index}
                ref={'imageFigure' + index}/>
            })
          }
        </section>
        <nav className="controller-nav">
          {
            imageDatas.map((item, index) => {
              return <ControllerUnit
                arrange={this.state.imgsArrangeArr[index]}
                key={index}
                inverse={() => this.inverse(index)}
                center={() => this.center(index)}/>
            })
          }
        </nav>
      </section>
    );
  }
}

export default App;
